<!DOCTYPE html>
<html>
<head>
    <title>Simple Page</title>
    <style>
    h1 {
        background-color: #0080ff
    }
    h2 {
        background-color: #00ff80
    }
    </style>
    <script>
        "use strict";

        function doPostMessage(message) {
            // Do different things in WebView2 vs the browser, so neither gets an error
            try {
                window.chrome.webview.postMessage(message);
            }
            catch {
                window.postMessage(message);
            }
        };

        function onGotFocus(x) {
            var output = (x.id) ? x.id : x;
            doPostMessage("Focus on: " + output);
            console.log("Focus on: " + output);
        };

        function onFocusOut() {
            if (!document.hasFocus()) {
                doPostMessage("Focus on: document lost focus");
                console.log("Focus on: document lost focus");
            }
        };

        function onGotBlur(x)
        {
            var output = (x.id) ? x.id : x;
            doPostMessage("Blur on: " + output);
            console.log("Blur on: " + output);
        };

        function navigateToTextPage() {
            window.location.assign('SimplePageWithText.html');
        };

        window.onresize = function() {
            window.chrome.webview.postMessage("Webview resized.");
        };

        function getWindowXPosition() {
            return window.screenX;
        };

        function getWindowYPosition() {
            return window.screenY;
        };

        function getWindowWidth() {
            return window.innerWidth;
        };

        function getWindowHeight() {
            return window.innerHeight;
        };

        function updateLanguage() {
            var userLang = navigator.language || navigator.UserLanguage;
            document.getElementById("languageInfo").innerHTML = userLang;
        };

        function getLanguage() {
            return document.getElementById("languageInfo").innerHTML;
        };
    </script>
</head>
<body id="body" onload="updateLanguage()" onfocus="onGotFocus(this)" onblur="onGotBlur(this)" onfocusout="onFocusOut()">
    <div id="rectangle" style="width:100px; height:100px; background-color:#ff8000"></div>
    <h1><a id="w1B" href="http://www.bing.com/" onfocus="onGotFocus(this)" onblur="onGotBlur(this)">Visit Bing!</a></h1>
    <h2><a id="w2B" href="http://www.microsoft.com/" onfocus="onGotFocus(this)" onblur="onGotBlur(this)">Visit Microsoft!</a></h2>
    <input id="b1B" type="submit" name="button" onclick="navigateToTextPage()" onfocus="onGotFocus(this)" onblur="onGotBlur(this)" value="Navigate Locally" />
    Language: <h2 id="languageInfo">unknown</h2>
</body>
</html>